<template>
  <div>
    <el-row>
      <label class="row-lable">用户id:</label>
      <el-input style="width:160px" v-model="userId"></el-input>
      <el-button type="primary" @click="jump(1)">搜索</el-button>
      <el-select v-model="status" placeholder="请选择" @change="jump(1)">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-row>

    <el-table :data="tableData" border highlight-current-row stripe style="width: 100%;margin-top: 20px">
      <el-table-column label="用户id" prop="userId"></el-table-column>
      <el-table-column label="用户昵称" prop="nick"></el-table-column>
      <el-table-column label="提现金额" prop="money"></el-table-column>
      <el-table-column label="申请时间" prop="applyTime"></el-table-column>
      <el-table-column label="审核时间" prop="examineTime"></el-table-column>
      <el-table-column label="微信">
        <template slot-scope="scope">
          <template v-if="scope.row.wxNick">
            <img :src="scope.row.wxHeadUrl" style="width:70px;height: 70px;"/>
            {{scope.row.wxNick}}
          </template>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status==2">已通过</template>
          <template v-if="scope.row.status==3">未通过</template>
        </template>
      </el-table-column>
      <el-table-column label="拒绝理由" prop="remark"></el-table-column>
    </el-table>

    <el-pagination
      background
      @current-change="jump"
      layout="total, prev, pager, next, jumper"
      :pageSize=15
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
  import {ajax,cashRecord} from "../../data/service";

  export default {
    name: "cashRecord",
    data() {
      return {
        status: 1,
        options: [{
          value: 1,
          label: '全部'
        }, {
          value: 2,
          label: '已通过'
        }, {
          value: 3,
          label: '未通过'
        }],
        page:1,
        total:0,
        tableData:[],
        userId:''
      }
    },
    mixins: [ajax],
    created() {
      this.loadData();
    },
    methods: {

      loadData(){
        this.doajax(cashRecord,
          {
            page:this.page,
            status:this.status,
            userId:this.userId ===undefined?"":this.userId
          },
          resp=>{
          this.tableData = resp.data;
          this.total= resp.total;
          }
        );
      },
      jump(val){
        this.page=val;
        this.loadData();
      }
    }
  }
</script>

<style>
  .el-select > .el-input{
    width: 150px;
    margin: 10px 0;
  }
  .el-select .el-input__inner {
    width: 150px;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
</style>
